<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Carousel 走马灯</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style type="text/css">
.demonstration {
  color: var(--el-text-color-secondary);
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}



</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">结合使用 el-carousel 和 el-carousel-item 标签就得到了一个走马灯。 每一个页面的内容是完全可定制的，把你想要展示的内容放在 el-carousel-item 标签内。</p>
	<p class="desc">默认情况下，在鼠标 hover 底部的指示器时就会触发切换。 通过设置 trigger 属性为 click，可以达到点击触发的效果。</p>
	<div class="block text-center">
		<span class="demonstration">指示器悬停时切换（默认）</span>
		<el-carousel height="150px">
			<el-carousel-item v-for="item in 4" :key="item" :label="`label-${item}`">
				<h3 class="small justify-center" text="2xl">{{ item }}</h3>
			</el-carousel-item>
		</el-carousel>
	</div>
	<div class="block text-center" m="t-4">
		<span class="demonstration">单击指示器时切换</span>
		<el-carousel trigger="click" height="150px">
			<el-carousel-item v-for="item in 4" :key="item">
				<h3 class="small justify-center" text="2xl">{{ item }}</h3>
			</el-carousel-item>
		</el-carousel>
	</div>
	
	<el-divider content-position="left">指示器</el-divider><!-- =============================================================== -->
	<p class="desc">可以将指示器的显示位置设置在容器外部</p>
	<p class="desc">indicator-position 属性定义了指示器的位置。 默认情况下，它会显示在走马灯内部，设置为 outside 则会显示在外部；设置为 none 则不会显示指示器。</p>
	<el-carousel height="150px" indicator-position="outside">
		<el-carousel-item v-for="item in 4" :key="item">
			<h3 text="2xl" justify="center">{{ item }}</h3>
		</el-carousel-item>
	</el-carousel>
	
	<el-divider content-position="left">切换箭头</el-divider><!-- =============================================================== -->
	<p class="desc">可以设置切换箭头的显示时机</p>
	<p class="desc">arrow 属性定义了切换箭头的显示时机。 默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示。 若将 arrow 设置为 always，则会一直显示；设置为 never，则会一直隐藏。</p>
	<el-carousel :interval="5000" height="150px" arrow="always">
		<el-carousel-item v-for="item in 4" :key="item">
			<h3 text="2xl" justify="center">{{ item }}</h3>
		</el-carousel-item>
	</el-carousel>
	
	<el-divider content-position="left">卡片化</el-divider><!-- =============================================================== -->
	<p class="desc">当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格</p>
	<p class="desc">将 type 属性设置为 card 即可启用卡片模式。 从交互上来说，卡片模式和一般模式的最大区别在于，卡片模式可以通过直接点击两侧的幻灯片进行切换。</p>
	<el-carousel :interval="4000" type="card" height="150px">
		<el-carousel-item v-for="item in 6" :key="item">
			<h3 text="2xl" justify="center">{{ item }}</h3>
		</el-carousel-item>
	</el-carousel>
	
	<el-divider content-position="left">垂直布局</el-divider><!-- =============================================================== -->
	<p class="desc">默认情况下，direction 为 horizontal。 通过设置 direction 为 vertical 来让走马灯在垂直方向上显示。</p>
	<el-carousel height="150px" direction="vertical" :autoplay="false">
		<el-carousel-item v-for="item in 4" :key="item">
			<h3 text="2xl" justify="center">{{ item }}</h3>
		</el-carousel-item>
	</el-carousel>
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			message: 'Hello Vue!!',
			currentDate: new Date(),
		}
	},
	methods:{
		fn(){
			this.message = "欢迎来到HTML中文网。";
		},
		hello(par){
			this.message = "参数值为：" + par;
		}
	}
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>